<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录</title>
  <style>
  </style>
</head>

<body>
  账号： <input type="text" id="text" value=""><br>
  密码： <input type="password" id="pass"><br>
  <button onclick="button()">按钮</button>
  <script>
    let text = document.getElementById('text')
    let pass = document.getElementById('pass')
    function button() {
      if ((/^\w+$/).test(text.value) == false || text.value.length < 5) {
        text.style.border = ' 3px solid red'
      }
      else {
        text.style.border = ' 3px solid #fff000'

      }
      var reg = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^&*`~()-+=]+$)(?![0-9\\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$%^&*`~()-+=]{8,30}$/;

      if (reg.test(pass.value) == false || pass.value.length < 8) {
        pass.style.border = ' 3px solid red'
      }
      else {
        pass.style.border = ' 3px solid #fff000'

      }
    }

  </script>
</body>

</html>